<template>
    <div class="page">
        <div class="search h100 flex-v-center">
            <div class="daka w100 flex-column flex-center" @click="$navigate.to('/pages/respect/index')">
                <i class="icon-wangluobanji fs40 fw-bold color-red"></i>
                <span class="fs26">打卡</span>
            </div>
            <div class="input flex-center" @click="$refs.searchMask.open()">
                <i class="icon-search mar-r10 color-ccc"></i>
                <input class="flex-1" style="pointer-events:none;" type="text" placeholder="查找文章或视频" placeholder-class="placeholder" disabled>
            </div>
            <div class="publish mar-l20 pad-lr20 flex-center" @click="$navigate.to('/pages/create/index')">
                <i class="icon-plus color-red mar-r10 fs26"></i>
                <span class="fs26">发布</span>
            </div>
        </div>
        <div class="nav">
            <scroll-view class="nav_scroll" :scroll-into-view="`n${scrollPosId}`" scroll-with-animation scroll-x>
                <div class="nav_list">
                    <div class="nav_item" 
                        v-for="(item, index) in subList" 
                        @click="changeNav(item, index)"
                        :id="`n${item.id}`"
                        :key="index" :class="{active: item.id == actSub}">
                        <span>{{item.industryName}}</span>
                    </div>
                </div>
            </scroll-view>
            <div class="add_nav pad-lr20 flex-v-center">
                <p class="flex-1" @click="$navigate.to('/pages/material/types')">添加</p>
                <i @click="setSort('open')" class="icon-paixuzhengxu"></i>
            </div>
        </div>
        <div class="list video_list" v-if="actSub == 'video'">
            <div class="v-item" 
                @click="$navigate.to('/pages/material/video?id=' + item.id)" 
                v-for="(item, index) in list" :key="index">
                <videoItem :item="item" ></videoItem>
            </div>
        </div>
        <div v-else class="list">
            <articleItem 
                v-for="(item, index) in list" 
                @click="$navigate.to(`/pages/material/${item.dynamicType == '00' ? 'detail' : 'video' }?id=` + item.id,  item.dynamicType == '00' ? true : false)"
                :item="item" :key="index"></articleItem>
        </div>
        <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
        <div style="height:50px;" class="wfull"></div>

        <uni-drawer class="sort_drawer" ref="showRight" mode="right">
            <div class="sort_container" @click="setSort('close')">
                <div class="sort_type">
                    <p v-for="(item, index) in sortTypeList" :key="'s_' + index" 
                        :class="{active: sortType == item.value}" 
                        @click.stop="setSort(item.value, 'sortType')">
                        {{item.name}}
                        <i v-if="sortType == item.value" class="icon-tick"></i>
                    </p>
                    <p v-for="(item, index) in dynamicList" :key="'d_' + index" 
                        :class="{active: dynamicType == item.value}" 
                        @click.stop="setSort(item.value, 'dynamicType')">
                        {{item.name}}
                        <i v-if="dynamicType == item.value" class="icon-tick"></i>
                    </p>
                </div>
            </div>
		</uni-drawer>

        <pub-search-mask 
            ref="searchMask" 
            placeholder="查找文章或视频" 
            @api="searchFn" 
            :max="search.max" 
            :noData="search.noData">
            <template>
                <div class="search_type flex">
                    <p @click="setDynamicType('00')" :class="{active: search.dynamicType == '00'}">文章</p>
                    <p @click="setDynamicType('01')" :class="{active: search.dynamicType == '01'}">视频</p>
                </div>
                <div class="list">
                    <articleItem 
                        @click="$navigate.to(`/pages/material/${item.dynamicType == '00' ? 'detail' : 'video' }?id=` + item.id, item.dynamicType == '00' ? true : false)" 
                        v-for="(item, index) in search.list" :item="item" :key="index"></articleItem>
                </div>
            </template>
        </pub-search-mask>
    </div>
</template>

<script>
import articleItem from '@/components/pages/article-item.vue'
import videoItem from '@/components/pages/video-item'
import { getDynamicList, getDynamicIndustrys } from '@/request/art'
export default {
    components: {
        articleItem,
        videoItem
    },
    data() {
        return {
            scrollPosId: '', //滚动定位的元素跟当前选中的元素错开2个

            sortType: 'createTime',
            sortTypeList: [
                { name: '最新发布', value: 'createTime' },
                { name: '转发最多', value: 'shareCnt' },
                { name: '阅读最多', value: 'viewCnt' },
            ],

            dynamicType: '',
            dynamicList: [
                { name: '文章+视频', value: '' },
                { name: '文章', value: '00' },
                { name: '视频', value: '01' },
            ],

            actSub: '',
            subList: [],

            list: [],
            scroll: {
                page: 1,
                size: 30,
                loading: false,
                max: true,
                noData: false,
            },
            search: {           
                dynamicType: '00',
                list: [],
                max: false,
                noData: false,
            }
        }
    },
    async onLoad() {
        await this.getSubs()
        this.onRefresh()
    },
    onReachBottom() {
        this.onInfinite()
    },
    onPullDownRefresh() {
        this.onRefresh()
    },
    methods: {
        getSubs() {
            return getDynamicIndustrys().then(res => {
                let subList = [
                    {
                        industryName: '推荐',
                        id: '',
                    },
                    // {
                    //     industryName: '视频',
                    //     id: 'video',
                    // },
                ]
                if(res.data.userIndustrys && res.data.userIndustrys.length) {
                    subList = subList.concat(res.data.userIndustrys)
                } else {
                    subList = subList.concat(res.data.dynamicIndustys)
                }
                this.subList = subList
                let index = 0
                let storageActId = uni.getStorageSync('actDynamicIndustrysId')
                if(storageActId) {
                    index = subList.findIndex(i => i.id == storageActId)
                    if(index == -1) {
                        index = 0
                    }
                }
                this.actSub = this.subList[index].id
            })
        },
        getList(complete) {
            let data = {
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
                sortType: this.sortType,
                industryId: this.actSub,
                dynamicType: this.dynamicType
            }

            getDynamicList(data, { complete }).then(res => {
                this.list = this.scroll.page == 1 ? res.data.list : this.list.concat(res.data.list)
                this.scroll.max = this.list.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        changeNav(item, index) {
            this.actSub = item.id
            this.scrollPosId = this.subList[index - 2 < 0 ? 0 : index - 2].id
            uni.setStorageSync('actDynamicIndustrysId', item.id)
            this.onRefresh()
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getList(() => {
                this.scroll.loading = false
            })
        },

        setSort(type, feild) {
            if(type == 'open') {
                this.$refs.showRight.open();
            } else if(type == 'close') {
                this.$refs.showRight.close();
            } else {
                this[feild] = type
                this.$refs.showRight.close();
                this.onRefresh()
            }
        },

        setDynamicType(type) {
            this.search.dynamicType = type
            this.$refs.searchMask.onRefresh()
        },
        searchFn(keyword, pageIndex, callback) {
            this.search.keyword = keyword
            if(!keyword) {
                this.search.list = [];
                this.search.noData = false;
                this.search.max = false
                callback && callback()
                return
            }
            getDynamicList({
                dynamicType: this.search.dynamicType,
                keyWord: keyword,
                pageIndex: pageIndex,
                pageSize: 30
            }, {complete: callback}).then(res => {
                this.search.list = pageIndex == 1 ? res.data.list : this.search.list.concat(res.data.list)
                this.search.max = this.search.list.length >= res.data.total
                this.search.noData = res.data.total == 0
            })
        }
    }
}
</script>

<style lang="less" scoped>
.page{
    height: auto;
}
.search{
    background: #fff;
    padding: 0 30rpx 0 0;
    .input{
        flex: 1;
        border-radius: 35rpx;
        height: 70rpx;
        background: #eee;
        padding: 0 20rpx;
    }
    .publish{
        width: 150rpx;
        height: 70rpx;
        border-radius: 35rpx;
        border: 1px solid #ddd;
    }
}

.nav{
    width: 100%;
    height: 90rpx;
    border-bottom: 1px solid #ddd;
    background: #fff;
    position: sticky;
    z-index: 100;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    .nav_scroll{
        flex: 1;
        height: 100%;
        overflow: auto;
        margin-right: 10rpx;
        padding-left: 10rpx;
        position: relative;
        .nav_list{
            display: flex;
            align-items: center;
            height: 100%;
        }
        .nav_item{
            height: 100%;
            flex-shrink: 0;
            padding: 0 20rpx;
            font-size: 34rpx;
            font-weight: bold;
            .align(center);
        }
        .active{
            color: @mainColor;
            position: relative;
            &::after{
                content: "";
                width: 35%;
                height: 8rpx;
                background: @mainColor;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                
            }
        }
        &::after{
            content: "";
            width: 40rpx;
            height: 70rpx;
            position: absolute;
            right: -40rpx;
            top: 1px;
            box-shadow: -20rpx 0 10rpx #fff;
            z-index: 10;
        }
    }
    .add_nav{
        width: 170rpx;
        height: 60rpx;
        border-left: 1px solid #ddd;
        p{
            font-weight: bold;
            font-size: 34rpx;
        }
        i{
            font-size: 50rpx;
        }
    }
}

.list{
    padding: 0 30rpx;
    background: #fff;
}
.video_list{
    display: flex;
    flex-wrap: wrap;
    padding: 25rpx;
    justify-content: space-between;
    .v-item{
        flex-shrink: 0;
        width: 340rpx;
        height: 450rpx;
        margin-bottom: 20rpx;
    }
}

.sort_drawer{
    /deep/ .uni-drawer__content{
        background: transparent;
    }
    .sort_container{
        width: 100%;
        height: 100%;
        padding: 200rpx 10rpx 0 0;
        display: flex;
        justify-content: flex-end;
        .sort_type{
            width: 240rpx;
            height: 420rpx;
            background: #fff;
            border-radius: 10rpx;
            padding: 0 15rpx;
            position: relative;
            &::before{
                content: "";
                width: 0;
                height: 0;
                position: absolute;
                top: -10rpx;
                right: 25rpx;
                border-bottom: 10rpx solid #fff;
                border-left: 10rpx solid transparent;
                border-right: 10rpx solid transparent;
            }
            p{
                height: 70rpx;
                line-height: 70rpx;
                border-bottom: 1px solid #eee;
                display: flex;
                align-items: center;
                justify-content: space-between;
                i{
                    font-size: 24rpx;
                }
                &.active{
                    color: @mainColor;
                }
            }
        }
    }
}

.search_type{
    width: 100%;
    height: 80rpx;
    border-bottom: 1px solid #ddd;
    padding: 0 30rpx;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    p{
        line-height: 80rpx;
        padding: 0 30rpx;
        margin-right: 20rpx;
        color: #666;
        &.active{
            font-weight: bold;
            position: relative;
            color: #000;
            &::before{
                content: "";
                width: 30rpx;
                height: 6rpx;
                background: @mainColor;
                position: absolute;
                bottom: 0;
                left: 50%;
                margin-left: -15rpx;
            }
        }
    }
}

</style>